

//调用用户名
renderUser()

//调用鉴权函数
checkLogin()

//退出业务
logout()


// 显示弹框
//获取模态框
const modalDom = document.querySelector('#modal')
//实例化模态框
const modal = new bootstrap.Modal(modalDom)


// // //显示模态框
// // modal.show()
// //点击事件
// const btn = document.querySelector('#openModal')
// btn.addEventListener('click', function (e) {
//     //显示模态框
//     modal.show()
// })
// //监听模态框显示和隐藏  需要绑定事件  'show.bs.modal'显示触发  'hide.bs.modal'隐藏触发
// modalDom.addEventListener('show.bs.modal', event => {
//     console.log('显示')
// })
// modalDom.addEventListener('hide.bs.modal', event => {
//     console.log('隐藏')
// })
//



// 数据增删改查
const list = document.querySelector('.list')
//渲染函数
async function render() {
    const { data } = await axios.get('/students')
    // console.log(res)
    list.innerHTML = data.map(item => {
        document.querySelector('.total').innerHTML = `${data.length}`
        return `
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <!--gender 0男1女 三元判断-->
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province}${item.city}${item.area}</td>
                <td>
                    <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
                    <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
                </td>
            </tr>
        `
    }).join('')
}
render()

const proSelect = document.querySelector('[name="province"]')
const citySelect = document.querySelector('[name="city"]')
const areaSelect = document.querySelector('[name="area"]')
//初始化省市区
let p = ''
async function initSelect() {
    //显示省份
    const { list } = await axios.get('/api/province')
    const html1 = list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    proSelect.innerHTML = `<option>--省份--</option>` + html1
    //切换省份  显示城市
    proSelect.addEventListener('change', async function (e) {
        //怎么获取切换的省份
        p = e.target.value
        const { list } = await axios.get(`/api/city?pname=${e.target.value}`)
        const html2 = list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        citySelect.innerHTML = `<option>--城市--</option>` + html2
        //切换省份数据 还原地区
        areaSelect.innerHTML = `<option>--地区--</option>`
    })
    //切换城市  显示地区

    citySelect.addEventListener('change', async function (e) {
        const { list } = await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html3 = list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        areaSelect.innerHTML = `<option>--地区--</option>` + html3
    })
}
initSelect()
//定义标识
let rowId

//添加业务
const btn = document.querySelector('#openModal')
btn.addEventListener('click', function (e) {
    ///给定义标识赋值
    rowId = null

    //显示模态框
    modal.show()
})

//编辑业务
list.addEventListener('click', async function (e) {
    //判断事件源  编辑
    if (e.target.classList.contains('bi-pen')) {
        // console.log(1)
        rowId = e.target.dataset.id
        //数据回显
        //1.数据请求 拿到点击标签
        const { data } = await axios.get(`/students/${rowId}`)
        // console.log(data)
        //2.给标签绑定数据
        //2.1给有规则的表单进行赋值
        const resArr = ['name', 'age', 'salary', 'group', 'hope_salary']
        resArr.forEach(item => {
            document.querySelector(`[name=${item}]`).value = data[item]
        })
        //2.2给性别进行赋值（回显）
        const genders = document.querySelectorAll('[name=gender]')
        // console.log(genders[0])
        genders[data.gender].checked = true
        //2.3给籍贯进行赋值（回显）
        const { province, city, area } = data
        //回显省份
        proSelect.value = province
        //回显城市
        const { list: list1 } = await axios.get(`/api/city?pname=${province}`)
        const html2 = list1.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        citySelect.innerHTML = `<option>--城市--</option>` + html2
        //回显
        //省市区下拉菜单回显 首先下拉菜单有数据（省市区） 给对应的标签设置value值
        citySelect.value = city
        //回显地区
        const { list: list2 } = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3 = list2.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        areaSelect.innerHTML = `<option>--地区--</option>` + html3
        //回显
        //省市区下拉菜单回显 首先下拉菜单有数据（省市区） 给对应的标签设置value值
        areaSelect.value = area
        //显示模态框
        modal.show()
    }

    //判断是否为删除
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        const flag = confirm('您确定要删除嘛')
        // console.log(flag)  true 确定  false 取消
        if (flag) {
            //删除数据
            await axios.delete(`/students/${id}`)
            //提示
            showToast('删除成功')
            //渲染
            render()
        }
    }
})


//点击确定按钮  添加和编辑
const btnSubmit = document.querySelector('#submit')
btnSubmit.addEventListener('click', async function (e) {
    //接收函数返回值
    const data = fn()
    //判断是添加还是编辑
    if (rowId) {
        //编辑
        //3.提交数据
        await axios.put(`/students/${rowId}`, data)
        //4.提示用户
        showToast('编辑成功')
        // //5.重新渲染

    } else {
        //添加
        //3.提交数据
        await axios.post('/students', data)
        //4.提示用户
        showToast('添加成功')
        //5.重新渲染
    }
    render()
    //隐藏模态框
    modal.hide()
})

//整理数据
function fn() {
    //1.收集用户信息
    const data = serialize(form, { hash: true, empty: true })
    //2.处理数据
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    return data
}


//modal-title
//监听模态框是否显示 显示修改模态框的标题
modalDom.addEventListener('show.bs.modal', event => {
    document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员' : '添加学员'
})

//监听模态框是否隐藏 隐藏修改清空内容
modalDom.addEventListener('hide.bs.modal', event => {
    form.reset()
})